<template>
  <div>
    <van-search shape="round" placeholder="请输入搜索关键词" v-model="value" @input="inputFn" />
    <!-- 热门搜索 -->
    <div v-if="list.length === 0">
      <van-cell title="热门搜索" />
      <div style="padding: 10px 16px">
        <van-tag
          v-for="tag in hots"
          :key="tag.first"
          color="#1989fa"
          size="large"
          plain
          round
          type="primary"
          @click="clickHotTag(tag.first)"
        >
          {{ tag.first }}
        </van-tag>
      </div>
    </div>

    <!-- 最佳匹配 -->
    <div v-else>
      <!-- <van-cell title="最佳匹配" />

      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item, index) in list" :key="index" :title="item.name" />
      </van-list> -->
      <SongItem
        v-for="obj in list"
        :key="obj.id"
        :name="obj.name"
        :author="obj.ar[0].name"
        :id="obj.id"
      ></SongItem>
    </div>
  </div>
</template>

<script>
import { hotSearch, getSearchList } from '@/api/search.js'
import _ from 'lodash'
export default {
  data() {
    return {
      hots: [],
      list: [],
      loading: false,
      finished: false,
      value: '',
      page: 0,
    }
  },
  async created() {
    let hot = await hotSearch()
    // console.log(hot)
    this.hots = hot.data.result.hots

    this.inputFn = _.debounce(this.inputFn, 500)

    // 临时测试
    // let res = await getSearchList({
    //   keywords: this.value,
    //   limit: 10,
    //   offset: (this.page - 1) * 10,
    // })
    // console.log(res.data.result.songs)
  },

  methods: {
    async getListFn() {
      return await getSearchList({
        keywords: this.value,
        limit: 10,
        offset: (this.page - 1) * 20,
      })
      console.log(res.data.result.songs)
    },

    // 点击热搜 点击的孤勇者
    async clickHotTag(val) {
      this.page = 1
      this.finished = false
      this.value = val
      let res = await this.getListFn()
      this.list = res.data.result.songs
      this.loading = false
    },

    // inputFn() {
    //   clearTimeout(this.timer)
    //   this.timer = setTimeout(() => {
    //     this.inputFn1()
    //   }, 500)
    // },

    async inputFn() {
      this.page = 1
      this.finished = false
      if (this.value.trim().length === 0) {
        this.list = []
        return
      }

      let res = await this.getListFn()

      if (res.data.result.songs === undefined) {
        this.finished = true
        this.loading = false
        this.list = []
        return
      }

      this.list = res.data.result.songs

      this.loading = false
    },

    async onLoad() {
      // 1.页面累加
      this.page++

      // 2.请求数据
      let res = await this.getListFn()

      // 5.全部数据加载完成
      if (res.data.result.songs === undefined) {
        this.finished = true
        this.loading = false
        return
      }
      // 4.拼接
      this.list = [...this.list, ...res.data.result.songs]

      // 3.本次加载完成
      this.loading = false
    },
  },
}
</script>

<style scoped>
.van-tag {
  margin-right: 7px;
  margin-bottom: 11px;
}
.van-list {
  padding-bottom: 50px;
}
</style>
